import React from 'react';
import { createForm } from 'rc-form';
import { hashHistory} from 'react-router';
import 'antd-mobile/dist/antd-mobile.css';
import request from '../../../utils/request';
import { Toast, Button,Switch ,InputItem,List,Picker,TextareaItem,WingBlank, WhiteSpace, } from 'antd-mobile';
import '../mall/less/index.less'
import './less/index.less';

let countryList = [];
let provinceList= [];
let cityList = [];
let districtList = [];
let fieldValue = {};
let userMsg = {};


const Item = List.Item;
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

class AddAddr extends React.Component {
    state = {
        data:now,
        cols: 1,
        asyncValue: [],
        fieldValue:[],
        status: '',
        hasError: false,
        value: '',
    };
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    componentDidMount() {
        this.props.changeTitle('新建收获地址');
        //获取地区信息
        request('RegionService','getRegionList', {
            method: 'POST',
            body: {},
        }).then(function (value) {
            const { regionList } = value.data.resultData;
            regionList.forEach((i) => {
                if (i.regionType === 0){
                    countryList.push(i);
                }else if (i.regionType === 1) {
                    provinceList.push(i);
                }else if (i.regionType === 2){
                    cityList.push(i);
                }else if (i.regionType === 3){
                    districtList.push(i)
                }
            })
        });
    }
    componentWillMount(){
        userMsg = this.props.location.state
    }
    onPickerChange = (val) => {
        let colNum = 1;
        const d = [...this.state.data];
        const asyncValue = [...val];
        d.forEach((i) => {
            if (i.value === val[0]) {
                colNum = 2;
                if (!i.children) {
                    let childrenList = [];
                    cityList.forEach((m) => {
                        if (m.parentId === i.value) {
                            childrenList.push(m);
                        }
                    });
                    i.children = childrenList;
                    asyncValue.push(i.children.value);
                } else {
                    i.children.forEach((k) => {
                        if (val[1] === k.value) {
                            let childrenList = [];
                            districtList.forEach((n) => {
                                if (n.parentId === k.value) {
                                    childrenList.push(n);
                                }
                            })
                            k.children = childrenList;
                            asyncValue.push(k.children.value);
                        }
                    });
                    colNum = 3;
                }
            }
        });
        this.setState({
            data: d,
            cols: colNum,
            asyncValue,
        });
        // console.log(provinceList[asyncValue[0]].label);
        // console.log(provinceList[asyncValue[1]].label);
        // console.log(provinceList[asyncValue[2]].label);
        console.log(this.state.data)
    }
    onClick = () => {
        setTimeout(() => {
            this.setState({
                data: provinceList,
            });
        }, 120);
    };

    chooseAddrs = () => {
        let value = this.props.form.getFieldsValue();
        fieldValue.consignee = value.consignee;
        fieldValue.mobile = value.mobile;
        // fieldValue.province = provinceList[this.state.asyncValue[0]].label;
        // fieldValue.city = provinceList[this.state.asyncValue[1]].label;
        // fieldValue.district = provinceList[this.state.asyncValue[2]].label;
        console.log(fieldValue.consignee);
        fieldValue.addr = value.addr;
        hashHistory.push({
            pathname: '/car/chooseAddrs',
            state:fieldValue,
        })

        // this.props.form.validateFields({ force: true },
        //     (err, values) => {
        //         if (!err) {
        //             console.log(values);
        //             values = {
        //                 ...values,
        //                 consignee: fieldValue.consignee,
        //                 mobile: fieldValue.mobile,
        //                 birthday: this.state.date === undefined ? userMsg.birthday : this.state.date,
        //                 mobilePhone: fieldValue.addr,
        //                 nickName: userMsg.nick_name,
        //                 officePhone: userMsg.office_phone,
        //                 homePhone: userMsg.home_phone,
        //                 qq: userMsg.qq,
        //                 userId: userMsg.user_id,
        //                 url: this.state.imageUrl
        //             };
        //             request('UserApplyService', 'supplierApply', {
        //                 method: 'POST',
        //                 body: values
        //             }).then(function (value) {
        //                 if (value.data.result === 0) {
        //                     hashHistory.push({
        //                         pathname: '/car/chooseAddrs',
        //                         state: fieldValue,
        //                     })
        //                     Toast.info("地址保存成功", 1);
        //                 } else if (value.data.result === 1) {
        //                     Toast.info("地址保存失败", 1);
        //                 }
        //             });
        //         }
        //         ;
        //     })
    };

    render() {
        const { getFieldProps } = this.props.form;
        return (
            <div>
                <list>
                    <InputItem {...getFieldProps('consignee',
                        {
                            initialValue: this.state.consignee,
                        })} type="text"
                    >收货人
                    </InputItem>
                    <InputItem {...getFieldProps('mobile',
                        {
                            initialValue: this.state.mobile,
                        })} type="text">联系方式</InputItem>
                    <Picker
                        data={this.state.data}
                        cols={this.state.cols}
                        //选中的地址
                        value={this.state.asyncValue}
                        onPickerChange={this.onPickerChange}
                    >
                        <List.Item arrow="horizontal" onClick={this.onClick}>地区</List.Item>
                    </Picker>
                    <TextareaItem
                        {...getFieldProps('addr',
                            {
                                initialValue: this.state.addr,
                            })}
                        type="text"
                        rows={3}
                        placeholder="请输入详细地址"
                    />
                </list>
                <list>
                    <Item extra={<Switch
                        {...getFieldProps('Switch1', {
                            initialValue: true,
                            valuePropName: 'checked',
                        })}
                        onClick={(checked) => { console.log(checked); }}
                    />} >设为默认地址</Item>
                </list>
                <div className="divX">
                    <WingBlank>
                        <WhiteSpace/>
                        <Button type="warning" size="large" onClick={this.chooseAddrs}>保存并使用</Button><WhiteSpace/>
                    </WingBlank>
                </div>

            </div>
        );
    }
}

export default createForm()(AddAddr);
